/*
 * @Description:
 * @Date: 2023-10-25 08:40:55
 * @LastEditTime: 2023-12-13 21:14:23
 */
import { defineConfig, splitVendorChunkPlugin, loadEnv } from 'vite';
import vue from '@vitejs/plugin-vue';
import { viteStaticCopy } from 'vite-plugin-static-copy';
import Components from 'unplugin-vue-components/vite';
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers';
import path from 'path';
import { insertHtml, h } from 'vite-plugin-insert-html';
// import postcsspxtoviewport from 'postcss-px-to-viewport';
import postCssPxToRem from 'postcss-pxtorem';
import cesium from 'vite-plugin-cesium';

// https://vitejs.dev/config/
// 开发模式，复制 node_modules 下的 cesium 依赖

export default context => {
	const cesiumLibraryRoot = 'node_modules/cesium/Build/CesiumUnminified/';
	const cesiumLibraryCopyToRootPath = 'libs/cesium/'; // 相对于打包后的路径
	const cesiumStaticSourceCopyOptions = ['Assets', 'ThirdParty', 'Workers', 'Widgets'].map(dirName => {
		return {
			src: `${cesiumLibraryRoot}${dirName}/*`, // 注意后面的 * 字符，文件夹全量复制
			dest: `${cesiumLibraryCopyToRootPath}${dirName}`
		};
	});
	const mode = context.mode;
	const envDir = 'env'; // 环境变量文件的文件夹，相对于项目的路径，也可以用 nodejs 函数拼接绝对路径
	const isProd = mode === 'production';
	const base = '/';
	const env = loadEnv(mode, envDir);
	const cesiumBaseUrl = env['VITE_CESIUM_BASE_URL'];

	return defineConfig({
		base: '/',
		envDir: 'env',
		plugins: [
			vue({
				template: {
					isProduction: true,
					compilerOptions: {
						isCustomElement: tag => tag.startsWith('app-')
					}
				},
				target: '2' // 设置为 2，以启用 Vue 2 语法和组件
			}),
			cesium(),
			Components({
				resolvers: [AntDesignVueResolver()]
			}),
			splitVendorChunkPlugin(),
			// viteExternalsPlugin({
			// 	cesium: 'Cesium' // 外部化 cesium 依赖，之后全局访问形式是 window['Cesium']
			// }),
			insertHtml({
				head: [
					// 生产模式使用 CDN 或已部署的 CesiumJS 在线库链接，开发模式用拷贝的库文件，根据 VITE_CESIUM_BASE_URL 自动拼接
					h('script', {
						// 因为涉及前端路径访问，所以开发模式最好显式拼接 base 路径，适配不同 base 路径的情况
						src: isProd ? `${cesiumBaseUrl}Cesium.js` : `${base}${cesiumBaseUrl}Cesium.js`
					})
				]
			}),
			viteStaticCopy({
				targets: [
					// 主库文件，开发时选用非压缩版的 IIFE 格式主库文件
					{
						src: `${cesiumLibraryRoot}Cesium.js`,
						dest: cesiumLibraryCopyToRootPath
					},
					// 四大静态文件夹
					...cesiumStaticSourceCopyOptions
				]
			})
		],
		server: {
			host: '0.0.0.0',
			proxy: {
				'/api': {
					target: 'http://127.0.0.1:9001',
					//target: 'http://124.221.177.11',
					//target: 'http://testyuye.natapp1.cc',
					// ws: true,
					changeOrigin: true,
					rewrite: path => path.replace(/^\/api/, '')
				}
			}
		},
		resolve: {
			alias: {
				// 键必须以斜线开始和结束
				'@': path.resolve(__dirname, 'src')
			}
			// 忽略后缀名的配置选项,vue不建议这样做，因为会影响IDE和类型支持
			//extensions: [".mjs", ".js", ".ts", ".jsx", ".tsx", ".json", ".vue"]
		},
		css: {
			preprocessorOptions: {
				less: {} // less相关配置
			},
			postcss: {
				plugins: [
					// postcsspxtoviewport({
					// 	unitToConvert: 'px', // 要转化的单位
					// 	viewportWidth: 1920, // UI设计稿的宽度
					// 	unitPrecision: 6, // 转换后的精度，即小数点位数
					// 	propList: ['!min-height', '!min-width', '*'], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
					// 	viewportUnit: 'vw', // 指定需要转换成的视窗单位，默认vw
					// 	fontViewportUnit: 'vw', // 指定字体需要转换成的视窗单位，默认vw
					// 	selectorBlackList: ['ignore-'], // 指定不转换为视窗单位的类名，
					// 	minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
					// 	mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false
					// 	replace: true, // 是否转换后直接更换属性值
					// 	exclude: [/node_modules/], // 设置忽略文件，用正则做目录名匹配
					// 	landscape: false // 是否处理横屏情况
					// })
					postCssPxToRem({
						rootValue: 16, // 1rem的大小
						propList: ['!min-height', '!min-width', '*'], // 需要转换的属性，最小高度和最小宽度不进行转换
						unitPrecision: 5, //保留rem小数点多少位
						selectorBlackList: ['ignore'], //则是一个对css选择器进行过滤的数组，比如你设置为['fs']，那例如fs-xl类名，里面有关px的样式将不被转换，这里也支持正则写法。
						mediaQuery: false, //媒体查询( @media screen 之类的)中不生效
						minPixelValue: 1 //px小于12的不会被转换
					})
				]
			}
		},
		build: {
			rollupOptions: {
				output: {
					chunkFileNames: 'js/[name]-[hash].js',
					entryFileNames: 'js/[name]-[hash].js',
					assetFileNames: '[ext]/[name]-[hash].[ext]',
					manualChunks(id) {
						if (id.includes('node_modules')) {
							return id.toString().split('node_modules/')[1].split('/')[0].toString();
						}
					}
				}
			}
		}
	});
};
